<script setup lang="ts" name="dataIncome">
import {ref, onMounted, reactive, computed} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStatisticsApi } from "/src/api/statistics";

import MainColumns from "/src/components/common/main-columns.vue";
import MainHeader from "/src/components/common/main-header.vue";

const router = useRouter();
const route = useRoute();
const lxsAppData = reactive({
	tab: {
		type: 1,
		secondName: ref('')
	},
	statisticsData: {},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			page: 1,
			pageSize: 10,
			product_title: '',
			data_time: '',
		},
	},
	productData: [],
	platformData: [
		{name: '产品数据', path: '/statistics'},
		{name: '收益数据', path: '/statistics/data_income'},
	],
})

const payStatusTextArr = computed(() => {
	return ['用户待支付', '用户已支付', '订单已完成', '无效订单', '用户已退款'];
})

// 左侧平台点击
const platformDataClick = (index) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

// 搜索产品名称点击
const productChange = (index) => {
	lxsAppData.tableData.param.product_title = lxsAppData.productData[index].product_title;
	getDataCenterNewData();
}
// 搜索时间点击
const dataTimeChange = (val) => {
	lxsAppData.tableData.param.data_time = val;
	getDataCenterNewData();
}

// 获取数据中心（收益数据）页面数据
const getDataCenterNewData = async () => {
	lxsAppData.tableData.loading = true;
	const res = await useStatisticsApi().getDatacenterIncomeData(lxsAppData.tableData.param);
	setTimeout(() => {
		lxsAppData.tableData.loading = false;
	}, 500);
	console.log('获取数据中心页面数据', res.data);
	lxsAppData.statisticsData = res.data.statistics;
	lxsAppData.tableData.data = res.data.lists.data;
	lxsAppData.tableData.total = res.data.lists.total;
	lxsAppData.productData = res.data.product_data;
}

// 分页改变
const onHandleSizeChange = (val) => {
	lxsAppData.tableData.param.pageSize = val;
	getDataCenterNewData();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	lxsAppData.tableData.param.page = val;
	getDataCenterNewData();
};
onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
	getDataCenterNewData();
});
</script>

<template>
	<div class="home-container">
		<el-row :gutter="15" class="layout-padding-auto">

			<div class="layout-container flex">

				<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

				<div class="layout-main">

					<MainHeader :second-name="lxsAppData.tab.secondName"/>

					<div class="main-content">

						<el-row :gutter="35">
							<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="产品名称">
									<el-select size="small" v-model="lxsAppData.tableData.param.product_title" class="w100" placeholder="请选择" @change="productChange">
										<el-option label="全部" value="0"></el-option>
										<el-option
											v-for="(item, index) in lxsAppData.productData"
											:key="item.id"
											:label="item.product_title"
											:value="index">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="日期">
									<el-date-picker
										v-model="lxsAppData.tableData.param.data_time"
										type="datetimerange"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
										format="YYYY-MM-DD HH:mm:ss"
										value-format="YYYY-MM-DD HH:mm:ss"
										size="small"
										clearable
										@change="dataTimeChange"
									/>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
								<el-form-item label="">
									<el-tooltip
										class="box-item"
										effect="light"
										content="<span style='color:#333333;font-size:13px;'>因为网络维护原因导致订单失效的订单；<br>
		用户待支付始终未支付直至订单自动关闭转为无效订单；</span>"
										raw-content
										placement="right"
									>
										<div class="flex-items-center">
											<el-image style="width:16px; height:16px;" src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E7%96%91%E9%97%AE.png"></el-image>
											<span style="text-indent: 6px; color: #00B1FD;">什么是无效订单？</span>
										</div>
									</el-tooltip>
								</el-form-item>
							</el-col>
						</el-row>

						<div class="income-simple">

							<div class="income-box">
								<div class="income-box-top flex-center flex-items-center">
									<span>今日成单数（笔）</span>
									<p>{{ lxsAppData.statisticsData.today_buy_count }}</p>
									<div :class="lxsAppData.statisticsData.today_buy_compare > 0 ? 'bg-success' : 'bg-danger'"></div>
								</div>
								<div class="income-box-bottom flex-center flex-items-center">
									<p>较昨日 <span :class="lxsAppData.statisticsData.today_buy_compare > 0 ? 'color-success' : 'color-danger'">{{ lxsAppData.statisticsData.today_buy_compare > 0 ? '+' + lxsAppData.statisticsData.today_buy_compare : lxsAppData.statisticsData.today_buy_compare }}</span></p>
								</div>
							</div>

							<div class="income-box">
								<div class="income-box-top flex-center flex-items-center">
									<span>今日预估收益（元）</span>
									<p>{{ lxsAppData.statisticsData.today_income_num }}</p>
									<div :class="lxsAppData.statisticsData.today_income_compare > 0 ? 'bg-success' : 'bg-danger'"></div>
								</div>
								<div class="income-box-bottom flex-center flex-items-center">
									<p>较昨日 <span :class="lxsAppData.statisticsData.today_income_compare > 0 ? 'color-success' : 'color-danger'">{{ lxsAppData.statisticsData.today_income_compare > 0 ? '+' + lxsAppData.statisticsData.today_income_compare : lxsAppData.statisticsData.today_income_compare }}</span></p>
								</div>
							</div>

							<div class="income-box">
								<div class="income-box-top flex-center flex-items-center">
									<span>本月成单数（笔）</span>
									<p>{{ lxsAppData.statisticsData.month_buy_count }}</p>
									<div :class="lxsAppData.statisticsData.month_buy_compare > 0 ? 'bg-success' : 'bg-danger'"></div>
								</div>
								<div class="income-box-bottom flex-center flex-items-center">
									<p>较上月 <span :class="lxsAppData.statisticsData.month_buy_compare > 0 ? 'color-success' : 'color-danger'">{{ lxsAppData.statisticsData.month_buy_compare > 0 ? '+' + lxsAppData.statisticsData.month_buy_compare : lxsAppData.statisticsData.month_buy_compare }}</span></p>
								</div>
							</div>

							<div class="income-box">
								<div class="income-box-top flex-center flex-items-center">
									<span>本月预估收益（元）</span>
									<p>{{ lxsAppData.statisticsData.month_income_num }}</p>
									<div :class="lxsAppData.statisticsData.month_income_compare > 0 ? 'bg-success' : 'bg-danger'"></div>
								</div>
								<div class="income-box-bottom flex-center flex-items-center">
									<p>较上月 <span :class="lxsAppData.statisticsData.month_income_compare > 0 ? 'color-success' : 'color-danger'">{{ lxsAppData.statisticsData.month_income_compare > 0 ? '+' + lxsAppData.statisticsData.month_income_compare : lxsAppData.statisticsData.month_income_compare }}</span></p>
								</div>
							</div>
						</div>

						<el-card shadow="hover" class="min-table layout-padding-auto">

							<el-table
								:data="lxsAppData.tableData.data"
								v-loading="lxsAppData.tableData.loading"
								border size="small"
								:header-cell-style="{backgroundColor: '#EEF1F5', color: '#010101'}"
								highlight-current-row
								style="width: 100%"
		                        empty-text="暂无记录"
							>
								<el-table-column label="序号" type="index" show-overflow-tooltip min-width="60"></el-table-column>
								<el-table-column prop="order_sn" label="订单编号" show-overflow-tooltip min-width="150"></el-table-column>
								<el-table-column prop="product_title" label="产品名称" show-overflow-tooltip min-width="150"></el-table-column>
								<el-table-column prop="order_commission_ratio" label="佣金比例" show-overflow-tooltip min-width="70">
									<template #default="order">
										<div style="display: flex; justify-content: space-around">
											{{ order.row.order_commission_ratio * 100 }}%
										</div>
									</template>
								</el-table-column>
								<el-table-column prop="commission" label="预估佣金" show-overflow-tooltip min-width="70"></el-table-column>

								<el-table-column prop="order_status" label="订单状态" show-overflow-tooltip min-width="120">
									<template #default="order">
										<div style="display: flex; justify-content: space-around">
											<el-tag type="warning" v-if="order.row.order_status == 0">{{ payStatusTextArr[order.row.order_status] ?? '未知' }}</el-tag>
											<el-tag type="success" v-if="order.row.order_status == 1">{{ payStatusTextArr[order.row.order_status] ?? '未知' }}</el-tag>
											<el-tag type="primary" v-if="order.row.order_status == 2">{{ payStatusTextArr[order.row.order_status] ?? '未知' }}</el-tag>
											<el-tag type="info" v-if="order.row.order_status == 3">{{ payStatusTextArr[order.row.order_status] ?? '未知' }}</el-tag>
											<el-tag type="danger" v-if="order.row.order_status == 4">{{ payStatusTextArr[order.row.order_status] ?? '未知' }}</el-tag>
										</div>
									</template>
								</el-table-column>

								<el-table-column prop="create_time" label="下单时间" show-overflow-tooltip min-width="140"></el-table-column>
								<el-table-column prop="pay_time" label="支付时间" show-overflow-tooltip min-width="140"></el-table-column>
								<el-table-column prop="update_time" label="更新时间" show-overflow-tooltip min-width="140"></el-table-column>

							</el-table>
							<div class="table-footer">
								<el-pagination
									small
									hide-on-single-page
									@size-change="onHandleSizeChange"
									@current-change="onHandleCurrentChange"
									class="mt15"
									:pager-count="5"
									:page-sizes="[10, 20, 30]"
									v-model:current-page="lxsAppData.tableData.param.page"
									background
									v-model:page-size="lxsAppData.tableData.param.pageSize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="lxsAppData.tableData.total"
								>
								</el-pagination>
							</div>

						</el-card>

					</div>

				</div>

			</div>

		</el-row>
	</div>
</template>

<style scoped lang="scss">
.income-simple {
	background: #FFFFFF;
	padding: 20px 0;
	border-bottom: 16px solid #F4F4F4;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;

	.income-box {
		font-size: 14px;
		color: #000000;

		.income-box-top {
			background: #F2F4F7;
			border-radius: 10px 10px 4px 4px;
			padding: 12px 50px;
			position: relative;

			p {
				font-weight: bold;
				font-size: 22px;
				margin-top: 12px;
			}

			.bg-success {
				width: 100%;
				height: 4px;
				background: #00B259;
				border-radius: 15px 15px 0px 0px;
				position: absolute;
				bottom: 0;
			}
			.bg-danger {
				width: 100%;
				height: 4px;
				background: #FC661C;
				border-radius: 15px 15px 0px 0px;
				position: absolute;
				bottom: 0;
			}
		}

		.income-box-bottom {
			margin-top: 12px;
			font-weight: bold;
		}
	}
}

.min-table {
	min-height: 56vh;
	position: relative;

	.table-footer {
		width: 95%;
		position: absolute;
		bottom: 0;
		background-color: #fff;
		padding-bottom: 10px;
		box-shadow: inset 0px 1px 0px 0px #DADEE6;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>